<template>
    <div>
            <template v-if="$route.path != '/discover'">
                <router-view></router-view>
        </template>
  
        <template v-else>
            <IndexInner></IndexInner>
            <div class="discover-middle clear-block">
                <div class="left-container">
                    <div class="left-zone-wrapper">
                        <div class="left-zone">
                            <HotRecommend></HotRecommend>
                            <AblumPublished></AblumPublished>
                            <BillRank></BillRank>
                        </div>

                    </div>
                </div>


                <div class="right-zone">
                    <VipCard></VipCard>
                    <UserProfile></UserProfile>
                    <SingerList></SingerList>
                    <HotDj></HotDj>
                </div>
            </div>
        </template>

    </div>
</template>
<script setup>
import IndexInner from './components/IndexInner.vue';
import HotRecommend from './components/HotRecommend.vue';
import AblumPublished from './components/AblumPublished.vue';
import BillRank from './components/BillRank.vue';
import VipCard from './components/VipCard.vue';
import UserProfile from './components/UserProfile.vue';
import SingerList from './components/SingerList.vue';
import HotDj from './components/HotDj.vue';

import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue';
const $route = useRoute();
const $router = useRouter();



</script>

<style lang="scss">
.discover-middle {
    width: 980px;
    min-height: 700px;
    margin: 0 auto;
    border: 1px solid #d3d3d3;

    background: url(../../assets/wrap1.png) repeat-y 100% 100%;

    .left-container {
        width: 100%;
        float: left;
        margin-right: -250px;

        .left-zone-wrapper {
            margin-right: 251px;

            .left-zone {
                padding: 20px 20px 40px;
            }
        }

    }





    .right-zone {
        position: relative;
        float: right;
        width: 250px;
        zoom: 1;
    }
}
</style>